<template>
	<div class="imgvue">
		<div class="header" v-show="show">
			<i class="iconfont" @click="last">&#xe625;</i>
			<h2>景区图片</h2>
		</div>
		<ul v-show="show">
			<li v-for="item of imgList" @click="imgbig"><img :src="item.url" alt=""></li>
		</ul>
		<swiper :options="swiperOption" class="dl" v-show="!show" @click="imgsmall">
		    <swiper-slide v-for="item of imgList" :key="item.id" @click="imgsmall">
		    	<img :src="item.url" alt="" @click="imgsmall">
		    </swiper-slide>
	  </swiper>
		    <div class="swiper-pagination"  slot="pagination" v-show="!show"></div>
	</div>
</template>
<script>
	export default({
		data(){
			return{
				swiperOption: {
		         pagination: {
		            el: '.swiper-pagination',
		          	type: 'fraction'
		          },
		          loop:true,
		          autoplay: {
		            delay: 2000,
		            stopOnLastSlide:false,
		            disableOnInteraction:true
		          }
		        },
				imgList:[
					{
						"url":"http://img1.qunarzz.com/sight/p0/1602/53/53cf6caed9f9b9ee90.img.jpg_350x240_34a3d53e.jpg"
					},
					{
						"url":"http://img1.qunarzz.com/sight/p0/1602/4d/4d8529eb55360f5090.img.jpg_350x240_9c36e5b2.jpg"
					},
					{
						"url":"http://img1.qunarzz.com/sight/p0/1602/2c/2ccb513f255467c790.img.jpg_350x240_c4748af3.jpg"
					},
					{
						"url":"http://img1.qunarzz.com/sight/p0/1602/e2/e2f5318eb8279a3190.img.jpg_350x240_0915e13a.jpg"
					},
					{
						"url":"http://img1.qunarzz.com/sight/p0/1602/de/de8400021b664c5390.img.jpg_350x240_9694a701.jpg"
					},
					{
						"url":"http://img1.qunarzz.com/sight/p0/1602/15/15c8516a575214fe90.img.jpg_350x240_1cef762d.jpg"
					},
					{
						"url":"http://img1.qunarzz.com/sight/p0/1602/22/22f29ed15b46fcb490.img.jpg_350x240_895df26d.jpg"
					},
					{
						"url":"http://img1.qunarzz.com/sight/p0/1602/d5/d58152a405ac325e90.img.jpg_350x240_93d261f6.jpg"
					}
				],
				show:true
			}
		},
		methods:{
			last(){
				this.$router.go(-1)
			},
			imgbig(){
				this.show=false;
			},
			imgsmall(){
				this.show=true;
			}
		}
	})
</script>
<style scoped>
	.imgvue{
		overflow:hidden;
		background: #f5f5f5;
	}
	.imgvue .header{
		position: fixed;
		top:0;
		left:0;
		right:0;
		z-index: 10;
		background: #fff;
	}
	.imgvue .header i{
		float: left;
		margin:0.3rem;
	}
	.imgvue .header h2{
		font-size: 0.4rem;
		text-align: center;
		line-height: 1rem;
	}
	.imgvue ul{
		position: absolute;
		top:1.2rem;
		width: 100%;
		box-sizing: border-box;
		overflow:hidden;
		margin-bottom: 0.4rem;
		z-index: 5;
	}
	.imgvue ul li{
		width: 50%;
		box-sizing: border-box;
		float:left;
		padding:0 0.1rem;
		margin-bottom: 0.1rem;
	}
	.imgvue .dl{
		overflow:hidden;
		background: #000;
		position: absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
	}
	.imgvue .dl  img{
		margin-top: 50%;
	}
	.swiper-pagination{
		color:#fff;
	}
</style>